<template>
  <div class="list-container">
    <div class="search-wrap clearfix">
      <div class="search-wrap-conditions fl marginL10">
        <el-select
          v-model="listQuery.condition.type"
          clearable
          placeholder="请选择文件类型"
          @change="resetPage"
        >
          <el-option
            v-for="item in filesType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <div class="search-wrap-conditions fl marginL10">
        <el-input
          v-model="listQuery.condition.keyword"
          class="input-width"
          placeholder="关键词, 标题"
          @keyup.enter.native="resetPage"
        />
      </div>
      <div class="search-wrap-btn fr">
        <el-button :disabled="loading" @click="resetSearch">重置</el-button>
        <el-button :disabled="loading" type="primary" @click="resetPage">搜索</el-button>
        <el-button :disabled="loading" type="success" @click="add">添加</el-button>
      </div>
    </div>
    <div class="main-wrapper">
      <div v-if="listData" class="clearfix">
        <el-col v-for="(item, index) in listData" :key="index" :span="6" style="overflow: hidden">
          <div class="study_list">
            <el-card shadow="never" class="el-card-height">
              <div v-if="item.type !== 'VIDEO'" class="clearfix text-center">
                <img
                  v-if=" item.fileType === 'txt' "
                  src="../../../assets/images/txt.jpg"
                  class="img-size"
                  @click="handleEdit(item)"
                />
                <img
                  v-else-if=" item.fileType === 'ppt' || item.fileType === 'pptx'"
                  src="../../../assets/images/ppt.jpg"
                  class="img-size"
                  @click="handleEdit(item)"
                />
                <img
                  v-else-if=" item.fileType === 'doc' || item.fileType === 'docx'"
                  src="../../../assets/images/word.jpg"
                  class="img-size"
                  @click="handleEdit(item)"
                />
                <img
                  v-else
                  src="../../../assets/images/excel.jpg"
                  class="img-size"
                  @click="handleEdit(item)"
                />
              </div>
              <div v-else class="clearfix text-center">
                <img
                  src="../../../assets/images/video.jpg"
                  class="img-size"
                  @click="handleEdit(item)"
                />
              </div>

              <div class="text-s-o front-lineHeight">{{ item.name }}</div>
              <div>
                <div class="fl fs-12 color_gray">
                  <el-breadcrumb separator="/">
                    <el-breadcrumb-item
                      v-for="(items, indexs) in item.categoryList"
                      :key="indexs"
                      class="fs-12"
                    >
                      <span class="color_gray">{{ items }}</span>
                    </el-breadcrumb-item>
                  </el-breadcrumb>
                </div>
                <div
                  class="marginL10 text-s-o fs-12 line-height20 fr color_gray"
                >{{ item.createTime }}</div>
              </div>
            </el-card>

            <div class="mask-box">
              <div class="mask" />
              <div class="btn-box">
                <el-button type="primary" @click="handleEdit(item)">预览</el-button>
              </div>
              <div class="btn-box">
                <el-button type="primary" @click="getDetail(item.id)">编辑</el-button>
              </div>
              <div class="btn-box">
                <el-button type="danger" @click="resPlatformDelete(item, index)">删除</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </div>

      <pagination :total="total" :page="listQuery.pager.page" @pagination="pagination" />
    </div>

    <el-dialog :visible.sync="dialog.visible" width="80%">
      <video width="100%" controls class="height-400px">
        <source :src="dialog.fileUrl" type="video/mp4" />
      </video>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialog.visible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CustomTable from '@/components/CustomTable/index';
import Pagination from '@/components/Pagination/index';
import { resPlatform, resPlatformDel } from '@/api/content';
import { filesType } from './data';

export default {
  name: 'List',
  components: {
    CustomTable,
    Pagination
  },
  data () {
    return {
      loading: false,
      filesType: filesType,
      listQuery: {
        condition: {
          categoryList: null,
          keyword: null,
          tag: null,
          type: null
        },

        pager: {
          page: 1,
          pageSize: 10
        }
      },
      listData: [],
      total: 0,
      columns: [
        { label: '序号', value: 'index' },
        { label: '标题', value: 'title', width: '500px' },
        { label: '创作', value: 'type' },
        { label: '状态', value: 'status' },
        { label: '发布者', value: 'promulgator' },
        { label: '时间', value: 'createTime' },
        { label: '操作', value: 'todo' }
      ],
      dialog: {
        fileUrl: null,
        visible: false
      }
    };
  },
  created () {
    this.init();
  },
  methods: {
    resetPage () {
      this.listQuery.pager.page = 1;
      this.listQuery.pager.pageSize = 10;
      this.init();
    },
    init () {
      this.loading = true;
      this.listQuery.condition.keyword = this.listQuery.condition.keyword ? this.listQuery.condition.keyword : null;
      resPlatform(this.listQuery)
        .then(res => {
          res.data.records.map(item => {
            var index = item.fileUrl.lastIndexOf('.');
            item.fileType = item.fileUrl.substr(index + 1);
            var inx = item.fileUrl.lastIndexOf('/');
            item.fileName = item.fileUrl.substr(inx + 1);
          });
          console.log(this.listData);
          this.listData = res.data.records;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    add () {
      this.$router.push({
        path: '/content/materialEditOrAdd'
      });
    },
    getDetail (id) {
      this.$router.push({
        path: '/content/materialEditOrAdd',
        query: { param: id }
      });
    },
    resetSearch () {
      this.listQuery = {
        condition: {
          categoryList: null,
          keyword: null,
          tag: null,
          type: null
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      };
      this.init();
    },
    pagination ({ page, limit }) {
      this.listQuery.pager.page = page;
      this.listQuery.pager.pageSize = limit;
      this.init();
    },

    resPlatformDelete (item, index) {
      const msg = '确认是否删除该素材！';
      this.$confirm(msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          resPlatformDel({
            id: item.id
          }).then(res => {
            this.resetSearch();
          });
        })
        .catch(() => {
          // 取消操作
          console.log('cancel');
        });
    },
    // excel word ppt预览
    handleEdit (item) {
      if (item.type !== 'VIDEO') {
        // url 为线上地址
        // var docx = 'http://www.xdocin.com/demo/demo.docx';
        var fileUrl = item.fileUrl;
        window.open(
          fileUrl,
          '_blank'
        );
        // if (!/\.(VIDEO|video|OTHER|other)$/.test(item.type)) {
        //   // window.open(
        //   //   'http://view.xdocin.com/xdoc?_xdoc=' + docx,
        //   //   '_blank'
        //   // );
        //   // 不是 VIDEO | OTHER 格式
        //   window.open(
        //     'http://view.xdocin.com/xdoc?_xdoc=' + fileUrl,
        //     '_blank'
        //   );
        //   return false;
        // } else {
        //   this.$message('文件格式有误');
        // }
      } else {
        this.dialog = {
          fileUrl: item.fileUrl,
          visible: true
        };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.front-lineHeight {
  max-width: 246px;
  line-height: 40px;
  min-height: 40px;
}
.img-size {
  width: 150px;
  height: 150px;
}
.el-card-height {
  height: 270px;
}
.height-400px {
  height: 400px;
}

.study_list {
  position: relative;
  margin: 10px;

  .mask-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    display: none;
    .btn-box {
      display: flex;
      flex-direction: column;
      align-content: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      z-index: 10;
    }
    .btn-box:not(:first-child) {
      margin-left: 10px;
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }
  }
}
.study_list:hover .mask-box {
  display: flex;
}
</style>
